import "./index.css";
import {useEffect, useRef, useState} from "react";
import {Navigate, Outlet, useMatches, useNavigate} from "react-router-dom";

function Tab({
  name,
  activeFlag,
  setActiveTabsName,
  path,
}: {
  activeFlag: string;
  name: string;
  setActiveTabsName: (value: string) => void;
  path: string;
}) {
  const navigate = useNavigate();

  const goRoute = () => {
    setActiveTabsName(name);
    navigate(path, { replace: false });
  };

  return (
    <>
      <div className={"tab_item"} onClick={goRoute}>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlnsXlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 32 32"
          style={{ height: "16px", width: "16px" }}
        >
          <circle
            cx="16"
            cy="16"
            r="10"
            fill="currentColor"
            color={activeFlag == name ? "#fdb6c7" : "#A1A1A1"}
          ></circle>
          <path
            d="M16 30a14 14 0 1 1 14-14a14.016 14.016 0 0 1-14 14zm0-26a12 12 0 1 0 12 12A12.014 12.014 0 0 0 16 4z"
            fill="currentColor"
            color="#A1A1A1"
          ></path>
        </svg>
        <div className={"tab_name"}>{name}</div>
      </div>
    </>
  );
}

function ButtonGroup({ buttonList }: { buttonList: Array<ButtonType> }) {
  return (
    <>
      <div className={"button_group"}>
        {buttonList.map((item: ButtonType) => {
          return (
            <div key={item.component} className={"button_group_item"}>
              <i className={`iconfont ${item.component}`} onClick={item.onClick} />
            </div>
          );
        })}
      </div>
    </>
  );
}

function SystemManagement() {

  const childRef = useRef<{openModal:()=>void}>(null)
  const [activeTabsName, setActiveTabsName] = useState("体系类别");
  const [tabsOptions, setTabsOptions] = useState([
    { title: "体系类别", path: "/system_management/system_category" },
    { title: "指南类别", path: "/system_management/guide_category" },
    { title: "反馈管理", path: "/system_management/feedback_management" },
    { title: "查阅管理", path: "/system_management/access_management" },
  ]);

  const matches = useMatches();

  const buttonList: Array<ButtonType> = [
    {
      component: "icon-xinjian",
      text: "",
      onClick: () => {
        childRef.current?.openModal();
      },
      vIf: false,
    },
  ];

  const permissionFilter = () => {
    const result = tabsOptions.filter(
      (item: { title: string; path: string }) => {
        return !!~(
          matches[matches.length - 2].handle as {
            children: Array<{ path: string }>;
          }
        )?.children.findIndex((i: { path: string }) =>
          item.path.includes(i.path),
        );
      },
    );
    setTabsOptions(result);
  };

  function Header({ title }: { title: string }) {
    return (
      <>
        <div className={"header"}>
          <span className={"title"}>{title}</span>
          <div className={"tabs"}>{<Tabs list={tabsOptions}></Tabs>}</div>
          <ButtonGroup buttonList={buttonList}></ButtonGroup>
        </div>
      </>
    );
  }

  function Tabs({ list }: { list: Array<{ title: string; path: string }> }) {
    return (
      <>
        {list.map((item: { title: string; path: string }) => {
          return (
            <Tab
              key={item.title}
              name={item.title}
              activeFlag={activeTabsName}
              setActiveTabsName={setActiveTabsName}
              path={item.path}
            ></Tab>
          );
        })}
      </>
    );
  }

  useEffect(() => {
    permissionFilter()
  }, [matches]);

  return (
    <>
      <div className={"system_management"}>
        <>
          <Header title={activeTabsName}></Header>
          <Navigate to={"/system_management/system_category"}></Navigate>
          <Outlet context={{ childRef }} />
        </>
      </div>
    </>
  );
}

export default SystemManagement;
